<template>
  <div class="page-main">
    <h2>个人基本信息</h2>
    <el-form ref="form" :model="formData" label-width="180px" :rules="rules">
      <el-row :gutter="20" style="width:95%">
        <el-col :span="12">
          <el-form-item label="用户名:">{{formData.account}}</el-form-item>
          <el-form-item label="手机号码:" prop="mobile">
            <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11"></el-input>
          </el-form-item>
          <!-- <el-form-item label="性别:">
            <el-radio-group v-model="formData.sex">
              <el-radio label="W">女</el-radio>
              <el-radio label="M">男</el-radio>
            </el-radio-group>
          </el-form-item> -->
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="formData.name" placeholder="请输入姓名" maxlength="50"></el-input>
          </el-form-item >
          <el-form-item label="电子邮箱:" prop="email">
            <el-input v-model="formData.email" placeholder="请输入电子邮箱" maxlength="150"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="modifyInfo">修改</el-button>
            <!-- <el-button type="warning" @click="gotoregister" v-if="!formInfor || !formInfor.id">申请添加供应商</el-button> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <h2>供应商注册信息</h2>
    <!-- <el-form :model="formInfor" label-width="180px" v-if="formInfor && formInfor.id">
        <el-row :gutter="20" style="width:95%">
          <el-col :span="12">
            <el-form-item label="营业执照编码:">{{formInfor.businessLicenseCode}}</el-form-item>
            <el-form-item label="单位名称:">{{formInfor.orgNameZh}}</el-form-item>
            <el-form-item label="成立日期:">{{formInfor.foundationDate|formeTime}}</el-form-item>
            <el-form-item label="营业地址:">{{formInfor.addr}}</el-form-item>
            <el-form-item label="联系人手机号:">{{formInfor.contactTel}}</el-form-item>
            <el-form-item label="电子邮箱:">{{formInfor.mail}}</el-form-item>
            <el-form-item label="法人代表:">{{formInfor.legalPerson}}</el-form-item>
            <el-form-item label="注册资本:">{{formInfor.registeredCapital}}</el-form-item>
            <el-form-item label="营业开始时间:">{{formInfor.openStart|formeTime}}</el-form-item>
            <el-form-item label="开户行:">{{formInfor.bankName}}</el-form-item>
            <el-form-item label="联系人姓名:">{{formInfor.contact}}</el-form-item>
            <el-form-item label="营业执照图片:">
              <img :src="formInfor.attachment1Url" class="preview" @click="previewImg(formInfor.attachment1Url)">
            </el-form-item>
            <el-form-item label="其他资源:" v-if="formInfor.attachment2">
              <img :src="formInfor.attachment2Url" class="preview" @click="previewImg(formInfor.attachment2Url)">
            </el-form-item>
            <el-form-item label="其他资源:" v-if="formInfor.attachment3">
              <img :src="formInfor.attachment3Url" class="preview" @click="previewImg(formInfor.attachment3Url)">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国别代码:">{{formInfor.countryCode}}</el-form-item>
            <el-form-item label="中文简称:">{{formInfor.orgNameZhShort}}</el-form-item>
            <el-form-item label="　"> </el-form-item>
            <el-form-item label="邮政编码:">{{formInfor.zipCode}}</el-form-item>
            <el-form-item label="传真号码:">{{formInfor.fax}}</el-form-item>
            <el-form-item label="网址:">{{formInfor.website}}</el-form-item>
            
            <el-form-item label="法人代表身份证/护照编码:">{{formInfor.legalPersonId}}</el-form-item>
            <el-form-item label="注册地址:">{{formInfor.registeredAddr}}</el-form-item>
            <el-form-item label="营业结束时间:">{{formInfor.openEnd|formeTime}}</el-form-item>
            <el-form-item label="开户行账号:">{{formInfor.bankAccount}}</el-form-item>
            
          </el-col>
        </el-row>
      </el-form>  -->
      <supplier-complete />
      <el-dialog :visible.sync='dialogVisible'>
        <img width='100%' :src='dialogImageUrl' alt='' />
      </el-dialog>

  </div>
</template>

<script>
  import { getPurchaser, getUserById, putUser, gethSupplierByUser } from "@/api/admin.api";
  import supplierComplete from '@/views/supplier/manage/supplier-complete/index'
  import { getFileUrl} from '@/api/common.api'
  import moment from 'moment'
  export default {
    name: 'view-material',
    components: {
      supplierComplete
    },
    data() {
      return {
        activeName: 'first',
        options:[
          {label:'事业单位',value: 0}
        ],
        // 个人基本信息
        formData: {},

        rules: {
          mobile: [
            { required: true, message: "请输入手机号码", trigger: "blur" },
          ],
          name: [
            { required: true, message: "请输入姓名", trigger: "blur" },
          ],
          email: [
            { required: true, message: "请输入电子邮箱", trigger: "blur" },
          ],
        },

        formInfor:{
        },

        dialogVisible:false,
        dialogImageUrl:'',
      }
    },
    watch: {},
    computed: {},
    filters: {
      formeTime(val){
        return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
      }
    },
    created() {
      // this.gethSupplier()
    },
    mounted() {
      // 获取基本信息
      this.getUserInfoFn()
      // 获取采购人信息
      // this.gethSupplier()
    },
    methods: {
      
      modifyInfo () {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            const id = this.$tools.localRead('userId')
            putUser({...this.formData},id).then(res=>{
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getUserInfoFn()
            })
          }
        });
        
      },
      
      getUserInfoFn() {
        const id = this.$tools.localRead('userId')
        getUserById(id).then(res=>{
          this.formData = res
          
        })
      },
      
      gethSupplier () {
        const id = this.$tools.localRead('userId')
        gethSupplierByUser(id).then((response) => {
          if(response && response.length==1){
            this.formInfor = { ...response[0]}
            this.getFileUrlFn(this.formInfor.attachment1, 0)
            this.getFileUrlFn(this.formInfor.attachment2, 1)
            this.getFileUrlFn(this.formInfor.attachment3, 2)
          }
        })
      },

      getFileUrlFn (fileId,type){
        if (!fileId) return
        // const self = this
        const arr = [
          {fileUrl:'attachment1Url'},
          {fileUrl:'attachment2Url'},
          {fileUrl:'attachment3Url'}
        ]
        getFileUrl(18,fileId).then(res=>{
          const key = arr[type].fileUrl
          this.formInfor[key]  = res
          this.$forceUpdate()
        })
      },

      previewImg (imgUrl) {
        this.dialogImageUrl = imgUrl
        this.dialogVisible = true
      },

      gotoregister(){
        this.$router.push({path:'/supplier-register'})
      },
    }
  }
</script>

<style scoped lang="scss">
  .page-main {
    padding: 20px;
    margin: 20px;
    background: #fff;
    h2{
      margin-bottom: 20px;
    }
  }
  .preview {
    width: 100px;
    height: 100px;
    cursor: pointer;
  }
</style>
